<!DOCTYPE html>

<html lang="en">
<head>
    <link href="css/BigData.css" rel="stylesheet" type="text/css" />
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <link href="css/index01.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.js"></script>
    <link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
    <link href="css/Security_operation.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="refresh" content="###">
    <link rel="stylesheet" href="js/artDialog/skins/default.css" type="text/css"/>
    <script src="js/laydate.js"></script>
    <script src="js/Home_page.js"></script>
    <script src="js/axios/axios.min.js"></script>
    <script src="js/MainMap.js"></script>
    <script src="myjs/video.js"></script>
    <script src="myjs/mymap.js"></script>
    <script src="myjs/axios.js"></script>
    <script src="Data/data.js"></script>
    <link href="css/mycss.css" rel="stylesheet" type="text/css" />
    <meta charset="UTF-8">
    <title>无人机监控和告警平台</title>

    <!-- 安全配置必须在JS API加载前设置 -->
    <script>
      window._AMapSecurityConfig = {
        securityJsCode: "41c3cada33d8553016ea2625b2211d3a"
      };
    </script>
    <!-- 只加载一次JS API 1.导航插件 2.全屏插件-->
    <script src="https://webapi.amap.com/maps?v=2.0&key=7b383cb0b6399e35e7f7969ac4334b2c&plugin=AMap.Driving"></script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=7b383cb0b6399e35e7f7969ac4334b2c&plugin=AMap.MapType"></script>

</head>

<body >
<!-- 全屏地图 -->
<div class="map_Full" id="map_Full"></div>
<div class="map-wrapper">
    <div class="minimize-icon-container" onclick="zoomIn()">
      <button class="minimize-icon" title="缩小">
        <svg viewBox="0 0 24 24" width="24" height="24">
          <path d="M5 11h14v2H5z"/>
        </svg>
      </button>
    </div>
</div>

<div class="data_bodey">
    <!-- 实时监控即统计分析1-5的上层部分 -->
    <div class="index_nav" >
        <div class="topest" style="  display: flex; justify-content: flex-end;">
            <div class="server-info" style="display: inline-block;width: 22%;">
                <div style="  display: flex; justify-content: flex-end;">
                    <strong style=" color: white; display: inline-flex; align-items: center;">🌐 服务器状态：</strong>
                    <span id="connectionStatus" class="connection-status disconnected">
                        <span class="status-dot"></span>
                        <span id="connectionText">未连接</span>
                    </span>
                </div>
            </div>
        </div>

        <div class="total_chose_box" style="display: none;">
            <div style="height: 32px;"></div>
            <span class="chose_tltle">请选择年份：</span>
            <select class="year_chose">
                <option>2025</option>
                <option>2024</option>
                <option>2023</option>
                <option>2022</option>
                <option>2021</option>
                <option>2020</option>
            </select>
            <span class="chose_tltle">请输入月份：</span>
            <input class="chose_text_in">
            <span class="chose_tltle">请选择区域：</span>
            <select class="year_chose">
                <option> 北京市</option>
                <option>自贡市</option>
                <option>攀枝花市</option>
                <option>泸州市</option>
                <option>德阳市</option>
                <option>绵阳市</option>
                <option>广元市</option>
                <option>遂宁市</option>
                <option>内江市</option>
                <option>乐山市</option>
                <option>南充市</option>
                <option>宜宾市</option>
                <option>广安市</option>
                <option>达州市</option>
                <option>巴中市</option>
                <option>雅安市</option>
                <option>眉山市</option>
                <option>资阳市</option>
                <option>阿坝州</option>
                <option>甘孜州</option>
                <option>凉山州</option>
            </select>
            <button class="chose_enter">确定</button>
        </div>
        <div class="clear"></div>
    </div>

    <div class="index_tabs" >
        <!--安防运作-->
        <div class="inner" style="height: 109%;">
            <!-- 左边总框 -->
            <div class="left_cage">
                <!-- 上层视频播放区 -->
                <div class="dataAllBorder01 cage_cl" style="margin-top: 1% !important; height: 24%;">                   
                    <!--video autoplay="false" loop="loop" class="dataAllBorder02 video_cage" >
                        <source class="video" title="即选视频" src="video/test_mv02.mov" />
                    </video-->
                    <div class="kuang02" style="width: 100% ;height: 100%; display: inline-block">
                    <video autoplay="false" class="dataAllBorder02 video_cage" title='可见光' style="display: block;" preload="auto" disablePictureInPicture muted>
                        <source class="video"  src="video/test_mv02.mov">
                    </video>
                    </div>
                </div>
                <!-- 中层视频存储区 -->
                <div class="dataAllBorder01 cage_cl" style="margin-top: 1.5% !important; height: 24%;">
                    <!--div class="dataAllBorder02 video_cage">
                        <div class="folder01">
                            <div class="kuang02">
                                <video class="video_around video_around_chose" title='可见光' style="display: block;" preload="auto" disablePictureInPicture muted>
                                    <source class="video"  src="video/test_mv02.mov">
                                </video>
                            </div>
                            <div class="kuang02">
                                <video class="video_around video_around_chose" title='热红外' style="display: block;" preload="auto" disablePictureInPicture muted>
                                    <source class="video"  src="video/test_mv02.mov">
                                </video>
                            </div>
                        </div>
                    </div-->    
                    <div class="kuang02" style="width: 100% ;height: 100%; display: inline-block">
                    <video autoplay="false" class="dataAllBorder02 video_cage" title='热红外' style="display: block;" preload="auto" disablePictureInPicture muted>
                        <source class="video"  src="video/test_mv02.mov">
                    </video>     
                    </div>         
                </div>
                <!-- 下层文件夹 -->
                <div class="dataAllBorder01 cage_cl" style="margin-top: 1.5% !important; height: 48%;">
                    <div class="dataAllBorder02 video_cage">
                        <div class="kuang01" style="position: relative;" style=" font-size: 0;">
                            <!-- <button class="top-right-btn" title="刷新"></button> -->
                            <div class="kuang04">
                                <input type="text" placeholder="搜索文件" >
                                <button type="submit"></button>
                            </div>
                            <div class="kuang05">
                                
                            </div>
                            <button class="custom-btn">选取识别</button>
                            <button class="left-custom-btn">发布异常</button>
                        </div>
                    </div>
                </div>      
            </div>

            <!-- 中间总框 -->
            <div class="center_cage">
                <div class="dataAllBorder01 cage_cl" style="margin-top: 0.5% !important; height: 62.7%; position: relative;">
                    <div class="dataAllBorder02" style="position: relative; overflow: hidden;">
                        <!--地图框标题栏-->
                        <div class="map_title_box" style="height: 6%">
                            <div class="map_title_innerbox">
                                <div class="map_title">实时地图</div>
                            </div>
                        </div>
                        <!-- 小地图 -->
                        <div class="map" id="map"  ></div>
                        <!-- 城市细化地点选择区 -->
                        <div class="display_type_box display_box" style="display: none;overflow:auto">
                            <!-- 城市细化地点选择区 -->
                            <div class="display_type_center_box">
                                <ul class="display_type_inner_box" id="layerList">
                                    <li class="display_type_msg"><input id="zt_4" type="checkbox" class="display_type_chose"/> 危化品企业</li>
                                    <li class="display_type_msg"><input  id="zt_1" type="checkbox" class="display_type_chose"/>仓库</li>
                                    <li class="display_type_msg"><input  id="zt_5" type="checkbox" class="display_type_chose"/>学校</li>
                                    <li class="display_type_msg"><input  id="zt_6" type="checkbox" class="display_type_chose"/>医疗卫生</li>
                                    <li class="display_type_msg"><input  id="zt_2" type="checkbox" class="display_type_chose"/>加油站</li>
                                    <li class="display_type_msg"><input  id="zt_0" type="checkbox" class="display_type_chose"/>停车场</li>
                                    <li class="display_type_msg"><input  id="zt_3" type="checkbox" class="display_type_chose"/>派出所</li>
                                    <li class="display_type_msg"><input  id="zt_7" type="checkbox" class="display_type_chose"/>应急避难场所</li>
                                    <li class="display_type_msg">----------------------------------</li>
                                    <li class="display_type_msg"><input id="zt_14" type="checkbox" class="display_type_chose" />危化品运输车辆</li>
                                    <li class="display_type_msg"><input id="zt_11" type="checkbox" class="display_type_chose" />监控设备</li>
                                    <li class="display_type_msg"><input id="zt_13" type="checkbox" class="display_type_chose" />巡逻警员</li>
                                    <li class="display_type_msg"><input id="zt_12" type="checkbox" class="display_type_chose" />巡逻警车</li>
                                </ul>
                            </div>
                            <!-- 确定按钮 -->
                            <div class="display_type_funct_box">
                                <span class="display_type_funct display_type_funct_sure">确定</span>
                            </div>
                        </div>
                        <!--城市选择-->
                        <div class="city_chose_box display_box" style="display: none">
                            <!-- 功能区-城市选择区 -->
                            <div class="display_type_center_box">
                                <ul class="display_type_inner_box" id="ulCity">
                                    <li class="display_type_msg"> 北京市</li>
                                    <li class="display_type_msg">自贡市</li>
                                    <li class="display_type_msg">攀枝花市</li>
                                    <li class="display_type_msg">泸州市</li>
                                    <li class="display_type_msg">德阳市</li>
                                    <li class="display_type_msg">绵阳市</li>
                                    <li class="display_type_msg">广元市</li>
                                    <li class="display_type_msg">遂宁市</li>
                                    <li class="display_type_msg">内江市</li>
                                    <li class="display_type_msg">乐山市</li>
                                    <li class="display_type_msg">南充市</li>
                                    <li class="display_type_msg">宜宾市</li>
                                    <li class="display_type_msg">广安市</li>
                                    <li class="display_type_msg">达州市</li>
                                    <li class="display_type_msg">巴中市</li>
                                    <li class="display_type_msg">雅安市</li>
                                    <li class="display_type_msg">眉山市</li>
                                    <li class="display_type_msg">资阳市</li>
                                    <li class="display_type_msg">阿坝州</li>
                                    <li class="display_type_msg">甘孜州</li>
                                    <li class="display_type_msg">凉山州</li>
                                </ul>
                            </div>
                            <!-- 确定按钮 -->
                            <div class="display_type_funct_box">
                                <span class="display_type_funct display_type_funct_sure">确定</span>
                            </div>
                        </div>
                        <!--轨迹回放-->
                        <div class="trajectory_box" style="display: none" id="divRouteReview">
                            <input class="trajectory" id="start" placeholder="开始时间">
                            <input class="trajectory" id="end"  placeholder="结束时间">
                            <select class="ratio">
                                <option>1倍</option>
                                <option>2倍</option>
                                <option>3倍</option>
                            </select>
                            <button class="playback" onclick="showRoute()">回放</button>
                            <button class="playback close_playback">关闭</button>
                        </div>
                        <!--坐标缓冲区设置-->
                        <div class="trajectory_box" style="display: none" id="divBufferSetting">
                            <button class="playback" style="width:60px" onclick="setBufferCenter()">设置点</button>
                            <input class="trajectory" id="txtBufferX" placeholder="坐标X">
                            <input class="trajectory" id="txtBufferY" placeholder="坐标Y">
                            <input value="10" class="trajectory" id="txtBufferDis" placeholder="缓冲距离">
                            <select class="ratio">
                                <option>米</option>
                                <option>千米</option>
                            </select>
                            <button class="playback"  onclick="executeBuffer();edit()" style="width:60px">分析</button>
                            <button class="playback close_playback">关闭</button>
                        </div>
                        
                        <!--地图工具栏-->
                        <div class="map_tool_outbox">
                            <span class="map_tool" onclick="zoomFull()">
                                    <a class="map_tool_inner" title="全图" ></a>
                            </span>
                            
                        </div>
                    </div>
                </div>

                <!-- 地图下分析数据框 -->
                <div class="dataAllBorder01 cage_cl" style="margin-top: 0.6% !important; height: 33.8%;">
                    <div class="dataAllBorder02" id="map_title_innerbox">
                        <!-- 标题层 -->
                        <div class="map_title_box">
                            <div class="map_title_innerbox">
                                <div class="map_title" style="background-image: url(img/second_title.png);">识别结果</div>
                                <button class="right-btn" title="清空"></button>
                            </div>
                            <!-- <div class="kuang-one" style="text-align: right; width: 150px;">
                                <div class="kuang04">
                                    <form id="selLayer" style="width:200px;">
                                        <input type="text" placeholder="搜索异常" >
                                        <button type="submit"></button>
                                    </form>
                                </div>
                            </div> -->
                        </div>

                    <!-- 异常分析区 -->
                        <div class="yichang-huatiao" style="overflow-y:auto !important;">
                            <!-- <button class="right-btn"></button> -->
                            <!-- <div class="shibie" style=" height: auto;" Lng="${Lng}" Lat="${Lat}">
                                <div class="scroll_top">
                                    <span class="scroll_title">${title}</span>
                                    <a class="localize"></a>
                                    <span class="haiba">海拔:${hight}m</span>
                                </div>
                                <div class="scroll_bottom" style=" height: auto;">                                                       
                                    <div class="msg_cage1" style=" height: auto;">
                                        <span class="localize_msg">
                                           
                                        </span>
                                    </div>
                                </div>
                                <div class="location-footer" >
                                    <span style="float: left;color: #4a97da;">${number}</span>
                                    <span class="scroll_timer">${time}</span>
                                </div>                                
                            </div> -->
                            
                        </div>                       
                    </div>  
                </div>
            </div>

            <!-- 右边总框 -->
            <div class="right_cage">
                <!--右边顶部-->
                <div class="dataAllBorder01 cage_cl" style="margin-top: 1% !important; height: 40%">
                    <div class="dataAllBorder02" id="cage_cl" >
                        <div class="button" style="width: 92.3%;">
                            <button class="fasong" style="width: 35%;">发送路线</button>
                            <button class="shanchu" style="width: 35%;">删除路线</button>
                            <!-- <button class="route-right-btn" title="添加路线"></button> -->
                        </div>
                        <!--单行输入-->
                        <!-- <input  class="shuru" style="width: 280px; position: absolute; bottom: 29%;" type="text" placeholder="经纬度轴" title="添加新路线">
                        <input  class="shuru" style="width: 280px; position: absolute; bottom: 33%;" type="text" placeholder="路线名" title="添加新路线"> -->
                        <!--路线按钮-->
                        <div class="kuang06" style="display: inline-block ;gap: 10px;">                                                      
                            
                            <!-- <button class="route-btn">路线1</button>
                            <button class="route-btn">路线2</button> -->

                        </div>
                    </div> 
                </div>

                <!-- 右边下层 -->
                <div class="dataAllBorder01 cage_cl check_decrease" style="margin-top: 1.5% !important; height: 56.4%; position: relative;">
                    <div class="dataAllBorder02 over_hide" style="padding: 1.2%;">

                        <div style="width: 100%;height: 20%;">
                            <div class="settings-panel" style="display: inline-block;width: 99%;">
                                <div class="setting-item">
                                    <label class="setting-label">解压路径：</label>
                                    <input type="text" id="extractPath" class="setting-input" 
                                        value="C:\Downloads\Extracted" 
                                        placeholder="输入解压路径">
                                </div>
                                <div class="setting-item">
                                    <label class="setting-label">
                                        <input type="checkbox" id="autoExtract" checked>下载后自动解压
                                    </label>
                                </div>
                            </div>
                        </div>    

                        <div class="controls">
                            <button id="refreshBtn" class="btn btn-primary" title="刷新文件列表">
                                🔄 刷新
                            </button>
                            <button id="downloadBtn" class="btn btn-success" disabled title="下载选中文件夹">
                                ⬇️ 下载
                            </button>
                            <button id="uploadBtn" class="btn btn-warning" title="上传文件">
                                ⬆️ 上传
                            </button>
                        </div>

                        <div id="status" class="status" style="display: none;"></div>

                        <div class="kuang06" style="width: 95%;height: 95%;">
                            <!-- <div id="folderList" class="kuang06" style="display: inline-block ;gap: 10px;overflow-y: auto;">                                                      
                                             
                            </div> -->
                            <div id="folderList" >
                                <div class="empty-state">
                                    <div class="icon">📂</div>
                                    <p>点击"刷新文件夹列表"开始</p>
                                </div>
                            </div>
                            <input type="file" id="fileInput" style="display: none;" multiple>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- jsx -->
<script src="js/echarts-all.js"></script>
<script src="js/index.js"></script>
<script src="js/bstable/js/bootstrap.min.js"></script>
<script src="js/bstable/js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="####"></script>

    <!--<script src="js/MainMap.js"></script>-->
<script src="js/Home_page.js"></script>
<script src="js/artDialog/artDialog.js"></script>
<script src="js/artDialog/plugins/iframeTools.source.js"></script>
<script>
    var number;
    $(function() {
        if (window.screen.height <= 768) {
            number = 4;
        } else if (window.screen.height > 768 && window.screen.height <= 900) {
            number = 6
        } else if (window.screen.height > 1080) {
            number = 8
        }
    });


//    翻页模块
    $(".tcdPageCode").createPage({
        pageCount:5,
        current:1,
        backFn:function(p){}
    });
    $(".chemistry_tcdPageCode").createPage({
    pageCount:4,
    current:1,
    backFn:function(p){}
});
    $(".enterprise_tcdPageCode").createPage({
    pageCount:4,
    current:1,
    backFn:function(p){}
});
    $(".car_tcdPageCode").createPage({
    pageCount:4,
    current:1,
    backFn:function(p){}
});

    $(function () {
        $(".tit02Diva a").each(function (index) {
            $(this).on("click",function () {
                $(".data_map").eq(index).fadeIn().siblings(".data_map").stop().hide();
                $(this).prev('i').removeClass('i_crlieAction');
                $(this).siblings('a').prev('i').addClass('i_crlieAction');

            })
        });
        BootstrapTable();
        Echarts();
        $("#fresh_tool").click(function(event){
            event.stopPropagation();
            cancel();
        })

    });
    function EventClick(){
        $(".check_increase").removeClass("check_increase_act");
        $("#over_hide1").show().siblings().hide();
        $(".check_decrease").show();
        $("#cage_cl").hide();
        $("#map_title_innerbox").hide();
        $("#cage_cl1").show();
//        $("#over_hide").show();
        $("#map_title_innerbox1").show();
        $(".addition_check_in").hide();
        $("#car_check_in").hide();
        BootstrapTable();
    }
    function cancel(e){
        $(".check_increase").removeClass("check_increase_act");
        $("#over_hide").show().siblings().hide();
        $(".check_decrease").show();
        $("#cage_cl").show();
        $("#cage_cl1").hide();
//        $("#cage_cl").show();
//        $("#over_hide1").show();
//        $("#map_title_innerbox").show();
        BootstrapTable();
    }

    //    地址检索
    $(".addition_check_btn").click(function () {
        $(".check_increase").addClass("check_increase_act");
        $(".check_decrease").hide()
        $(".addition_check_in").show().siblings().hide()
    });

//    危化品检索
    function chemistryCheck() {
        $(".check_increase").addClass("check_increase_act");
        $(".check_decrease").hide()
        $("#chemistry_check_in").show().siblings().hide()
    }

    //    企业检索
    function enterpriseCheck() {
        $(".check_increase").addClass("check_increase_act");
        $(".check_decrease").hide()
        $("#enterprise_check_in").show().siblings().hide()
    }

    //    车辆检索
    function carCheck() {
        $(".check_increase").addClass("check_increase_act");
        $(".check_decrease").hide()
        $("#car_check_in").show().siblings().hide()
    }

    function BootstrapTable() {
        $('#table').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "json/DGCar.json",
            dataType: "json",
            pagination: true, //分页
            pageSize: number,
            pageNumber: 1,
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams: null,
            columns: [
//                {
//                    title: "车辆编号",
//                    field: 'id',
//                    width:80,
//                    align: 'center',
//                    valign: 'middle'
//                },
                {
                    title: '车牌号',
                    field: 'carno',
                    width:80,
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '所属企业',
                    field: 'company',
                    align: 'center',
                    valign: 'middle'
                },

                {
                    title: '运输内容',
                    field: 'content',
                    align: 'center'
                },

                {
                    title: '行驶速度',
                    field: 'speed',
                    width:80,
                    align: 'center'
                },
                {
                    title: '车辆载重',
                    field: 'load',
                    width:80,
                    align: 'center'
                },
                {
                    title: '操作',
                    field: 'load',
                    align: 'center',
                    formatter: function (value, row) {
                        var e = '<a  href="javascript:void(0)" title="" onclick="showCarDetai()">查看详情</a> ';
                        var d = '<a  href="javascript:void(0)" title="" onclick="analiysis(\'' + row.id + '\')">车辆定位</a> ';
                        return e + d;
                    }
                }

            ]
        });
        $('#table1').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "json/note1.json",
            dataType: "json",
            pagination: true, //分页
            pageSize: number,
            pageNumber: 1,
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams: null,
            columns: [
                {
                    title: "威胁源",
                    field: 'id',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '辐射距离',
                    field: 'title',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '威胁范围',
                    field: 'type',
                    align: 'center',
                    valign: 'middle'
                },

                {
                    title: '危害类型',
                    field: 'person',
                    align: 'center'
                }

            ]
        });
        $('#table2').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "json/note2.json",
            dataType: "json",
            pagination: true, //分页
            pageSize: number,
            pageNumber: 1,
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams: null,
            columns: [
                {
                    title: "威胁源",
                    field: 'id',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '辐射距离',
                    field: 'title',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '威胁范围',
                    field: 'type',
                    align: 'center',
                    valign: 'middle'
                },

                {
                    title: '危害类型',
                    field: 'person',
                    align: 'center'
                }

            ]
        });
    }

    function Echarts() {
        var myChart = echarts.init($("#container_huan")[0]);
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['民用爆炸','射钉器材','危化品','寄递物流','旅店'],
                textStyle:{
                    color:"#e9ebee"
                }
            },
            series: [
                {
                    name:'行业数据',
                    type:'pie',
                    center:['80%','50%'],
                    radius: ['50%', '80%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    data:[
                        {value:335, name:'民用爆炸'},
                        {value:310, name:'射钉器材'},
                        {value:234, name:'危化品'},
                        {value:135, name:'寄递物流'},
                        {value:580, name:'旅店'}
                    ]
                }
            ]
        };
        myChart.setOption(option);
    }

</script>

<!-- 视频区 -->
<script>  
    //获取视频
    getAllVideos();
    //获取txt文本
    get_recordsData();

    // 视频点击播放
    // const videoContainers = document.querySelectorAll('.kuang02');
    // videoContainers.forEach(container => {
    //     container.addEventListener('click', (event) => {
    //         // 防止事件冒泡到父元素
    //         event.stopPropagation();            
    //         // 在点击的容器内查找视频元素
    //         const video = container.querySelector('video');
    //         if (!video) return;          
    //         // 获取视频源（优先使用 source 标签的 src）
    //         const source = video.querySelector('source');
    //         const videoSrc = source ? source.src : video.currentSrc;
    //         changeVideoSource(videoSrc);
    //     });
    // });  

    //创建文件夹 (位置不可变)
    for(let i=0; i < Folders.length; i++){      
        createFolderBox(Folders[i].id,Folders[i].title,Folders[i].src_rgb,Folders[i].src_ir,Folders[i].time,Folders[i].Lng,Folders[i].Lat,Folders[i].hight,Folders[i].number);
    }  
    // 当收到文件夹数据时创建
    if (allVideos && allVideos.length > 0 && recordsData && recordsData.length > 0) {
        for(let i=1; i <= Folders.length; i++){      
            createFolderBox(allVideos[i].page,recordsData[i].id,allVideos[i].src01,allVideos[i].src02,recordsData[i].time,recordsData[i].Lng,recordsData[i].Lat,recordsData[i].hight,recordsData[i].number);
        }  
    }
    else{
        console.warn("获取文件夹失败");
    }
    
    //选取识别按键功能
    setupSelectionButton();
    //点击文件夹换视频 
    changeFolderVideo();
    //发布异常键
    SendButton();
    
    // 文件夹搜索框
    document.querySelector('.kuang04 input').addEventListener('input', (e) => {
        if (e.target.value.trim() === '') {
            handleSearch();
        }
    });
    // 视频搜索按钮点击事件
    document.querySelector('.kuang04 button').addEventListener('click', handleSearch);
    // 视频输入框Enter键支持
    document.querySelector('.kuang04 input').addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            handleSearch();
        }
    });

    //文件夹刷新键
    RefreshButton()
    //识别结果刷新键
    UpdateButton();
</script>

<!-- 高德地图api -->
<script>  
    //地图中心点
    const center = [112.4907339, 23.11194];

    window.selectedPositions = window.selectedPositions || [];
    window.searchResults = window.searchResults || {};
    let mapManager; // 全局地图管理器实例

    // 全局更新地图标记的方法
    window.updateMapMarkers = function(positions) {
        if (mapManager) {
            mapManager.setMarkersFromPositions(positions);
        } else {
            console.error("地图管理器未初始化");
        }
    };

    // 新增：全局更新地图折线的方法
    window.updateMapPolyline = function(path, options) {
        if (mapManager) {
            mapManager.drawPolyline(path, options);
        } else {
            console.error("地图管理器未初始化");
        }
    };

    window.onLoad = function() {
        // 确保地图容器存在
        if (!document.getElementById('map')) {
            console.error("地图容器 'map' 不存在");
            return;
        }
        
        // 初始化地图
        mapManager = new MapManager('map').init();
        
        // 初始添加标记
        if (window.selectedPositions) {
            mapManager.setMarkersFromPositions(window.selectedPositions);
        } else {
            console.warn("selectedPositions 未定义，地图将不显示标记");
        }

        // 使用事件委托处理所有定位按钮的点击
        document.querySelector('.yichang-huatiao').addEventListener('click', function(event) {
            // 检查点击的是否是定位按钮
            if (event.target.classList.contains('localize')) {
                // 找到最近的 .shibie 父元素
                const shibieElement = event.target.closest('.shibie');
                if (shibieElement) {
                    // 直接从元素属性获取经纬度
                    const Lng = parseFloat(shibieElement.getAttribute('Lng'));
                    const Lat = parseFloat(shibieElement.getAttribute('Lat'));
                    
                    // 检查经纬度是否有效
                    if (!isNaN(Lng) && !isNaN(Lat)) {
                        // 调用地图方法
                        if (mapManager && typeof mapManager.smoothChangeCenter === 'function') {
                            mapManager.smoothChangeCenter(Lng, Lat);
                            console.log(`定位到: ${Lng}, ${Lat}`);
                        } else {
                            console.warn("地图管理器未初始化或缺少方法");
                        }
                    } else {
                        console.warn("无效的经纬度数据");
                    }
                } else {
                    console.warn("未找到包含位置信息的父元素");
                }
            }
        });

        // 容器切换按钮事件
        const mapToolInner = document.querySelector('.map_tool_inner');
        if (mapToolInner) {
            mapToolInner.addEventListener('click', function() {
                const newContainer = mapManager.currentContainer === 'map' ? 'map_Full' : 'map';
                mapManager.toggleMapContainer(newContainer);
            });
        }
        
        const minimizeBtn = document.querySelector('.minimize-icon-container');
        if (minimizeBtn) {
            minimizeBtn.addEventListener('click', function() {
                const newContainer = mapManager.currentContainer === 'map' ? 'map_Full' : 'map';
                mapManager.toggleMapContainer(newContainer);
            });
        }
    };
    // 确保AMap加载完成后执行初始化
    if (window.AMap) {
        window.onLoad();
    } else {
        window.initAMap = window.onLoad;
    }

    // // 清除折线
    // mapManager.clearPolylines();
    
    // 路线按钮功能
    // 1. 定义所有路径数据
    const routes = {
        1: [
            [112.4907339, 23.11194, 129.91, 0, 0, 0, 1, 0, 0],
            [112.4907333, 23.1119403, 135, 0, 0, 0.707, 0.707, 0, -30],
            [112.49106155, 23.11149330, 141.2, 0, 0, -0.707, 0.707, 0, -30],
            [112.49202605, 23.11201373, 145.9, 0, 0, 0, 1, 20, -30],
            [112.49167674, 23.11257543, 147, 0, 0, 0.707, 0.707, 20, -30],
            [112.4907333, 23.1119403, 140, 0, 0, 1, 0, 0, 0]
        ],
        2: [
            [112.4917339, 23.11194, 129.91, 0, 0, 0, 1, 0, 0],
            [112.4917333, 23.1119403, 135, 0, 0, 0.707, 0.707, 0, -30],
            [112.49106155, 23.11149330, 141.2, 0, 0, -0.707, 0.707, 0, -30],
            [112.49212605, 23.11201373, 145.9, 0, 0, 0, 1, 20, -30],
            [112.49167674, 23.11257543, 147, 0, 0, 0.707, 0.707, 20, -30],
            [112.4917333, 23.1119403, 140, 0, 0, 1, 0, 0, 0]
        ]
    };
    // 2. 创建按钮并存储数据
    Object.keys(routes).forEach(routeId => {
        const btn = document.createElement('button');
        btn.className = 'route-btn';
        btn.textContent = `路线${routeId}`;
        btn.dataset.routeId = routeId;  // 存储路线ID
        
        document.querySelector('.kuang06').appendChild(btn);
    });
    //全路线按钮
    RouteButton();

    //输入框添加新路线
    addRoute();

    // 使用示例：
    // addNewRoute(3, [
    //     [116.430000, 39.950000],
    //     [116.440000, 39.960000],
    //     [116.450000, 39.970000]
    // ]);

    // addNewRoute(4, [
    //     [116.460000, 39.980000],
    //     [116.470000, 39.990000],
    //     [116.480000, 40.000000]
    // ]);

</script>

<script>
    const serverUrl = 'http://10.15.4.255:5000';    //服务器地址
    class FolderTransferSystem {
        constructor() {
            this.selectedFolders = new Set(); //创建实例属性 selectedFolders，初始化为空的 Set 集合（用于存储选中的文件夹名）
            this.serverUrl = serverUrl; 
            this.init();
        }
        
        init() {
            this.bindEvents();  //绑定事件监听器
            this.checkConnection(); //检查服务器连接
            this.loadSettings();    //加载用户设置
        }
        
        bindEvents() {
            document.getElementById('refreshBtn').addEventListener('click', () => this.refreshFolders()); //点击时
            document.getElementById('downloadBtn').addEventListener('click', () => this.downloadFolders());
            document.getElementById('uploadBtn').addEventListener('click', () => this.uploadFiles());
            document.getElementById('fileInput').addEventListener('change', (e) => this.handleFileUpload(e)); //文件选择时
            document.getElementById('extractPath').addEventListener('change', () => this.saveSettings()); //值改变时
            document.getElementById('autoExtract').addEventListener('change', () => this.saveSettings());
        }
        
        loadSettings() {
            //从localStorage获取键为'extractPath'和'autoExtract'的保存值
            const savedExtractPath = localStorage.getItem('extractPath');
            const savedAutoExtract = localStorage.getItem('autoExtract');

            //如果存在保存的解压路径，将保存的值设置到解压路径输入框中
            if (savedExtractPath) {
                document.getElementById('extractPath').value = savedExtractPath;
            }
            //如果存在保存的自动解压设置，根据保存的值设置复选框的选中状态（将字符串'true'转换为布尔值）
            if (savedAutoExtract !== null) {
                document.getElementById('autoExtract').checked = savedAutoExtract === 'true';
            }
        }
        
        saveSettings() {
            //获取解压路径输入框的当前值
            const extractPath = document.getElementById('extractPath').value;
            //获取自动解压复选框的选中状态
            const autoExtract = document.getElementById('autoExtract').checked;
            
            //将解压路径和自动解压设置保存到localStorage
            localStorage.setItem('extractPath', extractPath);
            localStorage.setItem('autoExtract', autoExtract);
        }
        
        // 检查服务器连接状态
        async checkConnection() {
            try {
                //GET请求获取文件夹列表
                const response = await fetch(`${this.serverUrl}/api/folders`);
                this.updateConnectionStatus(response.ok);
            } catch (error) {
                //捕获请求过程中的错误
                this.updateConnectionStatus(false);
            }
        }
        
        updateConnectionStatus(connected) {
            const statusEl = document.getElementById('connectionStatus');
            const textEl = document.getElementById('connectionText');
            
            if (connected) {
                //设置连接状态元素的CSS类为已连接
                statusEl.className = 'connection-status connected';
                //设置连接状态文本为"已连接"
                textEl.textContent = '已连接';
            } else {
                statusEl.className = 'connection-status disconnected';
                textEl.textContent = '未连接';
            }
        }
        
        //显示状态消息
        showStatus(message, type = 'info') {
            const statusEl = document.getElementById('status');
            statusEl.textContent = message;
            statusEl.className = `status ${type}`;
            statusEl.style.display = 'block';
            
            setTimeout(() => {
                statusEl.style.display = 'none';
            }, 5000);
        }
        
        async refreshFolders() {
            const btn = document.getElementById('refreshBtn');
            btn.disabled = true;
            btn.innerHTML = '刷新中<span class="loading"></span>';
            
            try {
                const response = await fetch(`${this.serverUrl}/api/folders`);
                if (!response.ok) throw new Error('获取文件夹列表失败');
                
                const data = await response.json();
                this.renderFolders(data.folders);
                // this.showStatus('文件夹列表刷新成功', 'success');
                setTimeout(() => {
                    btn.innerHTML = '🔄 成功';
                }, 5000);
                this.updateConnectionStatus(true);
            } catch (error) {
                this.showStatus(`错误: ${error.message}`, 'error');
                this.updateConnectionStatus(false);
            } finally {
                btn.disabled = false;
                btn.innerHTML = '🔄 刷新';
            }
        }
        
        renderFolders(folders) {
            //获取文件夹列表容器元素
            const folderList = document.getElementById('folderList');
            
            //如果没有文件夹
            if (folders.length === 0) {
                folderList.innerHTML = `
                    <div class="empty-state">
                        <div class="icon">📂</div>
                        <p>没有找到文件夹</p>
                    </div>
                `;
                return;
            }
            
            folderList.innerHTML = folders.map(folder => `
                <div class="folder-item ${this.selectedFolders.has(folder.name) ? 'selected' : ''}" 
                     data-folder="${folder.name}">
                    <div class="folder-icon">📁</div>
                    <div class="folder-info">
                        <div class="folder-name">${folder.name}</div>
                        <div class="folder-size">大小: ${this.formatSize(folder.size)}</div>
                    </div>
                </div>
            `).join('');
            
            // 每个文件夹绑定点击事件
            folderList.querySelectorAll('.folder-item').forEach(item => {
                item.addEventListener('click', () => this.toggleFolderSelection(item));
            });
        }
        
        toggleFolderSelection(item) {
            const folderName = item.dataset.folder;
            
            //如果文件夹已被选中，从选中集合中移除
            if (this.selectedFolders.has(folderName)) {
                this.selectedFolders.delete(folderName);
                item.classList.remove('selected');
            } else {
                this.selectedFolders.add(folderName);
                item.classList.add('selected');
            }
            
            this.updateDownloadButton(); //更新下载按钮状态
        }
        
        updateDownloadButton() {
            const downloadBtn = document.getElementById('downloadBtn');
            downloadBtn.disabled = this.selectedFolders.size === 0;
            downloadBtn.textContent = `下载(${this.selectedFolders.size})`;
        }
        
        async downloadFolders() {
            if (this.selectedFolders.size === 0) {
                this.showStatus('请先选择要下载的文件夹', 'warning');
                return;
            }

            const btn = document.getElementById('downloadBtn');
            btn.disabled = true;
            btn.innerHTML = '传输中<span class="loading"></span>';

            try {
                // 1. 从服务器获取 ZIP  向服务器发送POST请求下载选中的文件夹
                const response = await fetch(`${this.serverUrl}/api/download`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ folders: Array.from(this.selectedFolders) })
                });

                if (!response.ok) throw new Error('获取文件夹失败');

                const blob = await response.blob();

                // 2. 直接发送到本地接收器（无需用户交互）
                const formData = new FormData();
                formData.append('file', blob, 'folders.zip');

                const localResponse = await fetch('http://127.0.0.1:5001/api/local-receive', {
                    method: 'POST',
                    body: formData
                });

                if (!localResponse.ok) throw new Error('本地写入失败');

                const result = await localResponse.json();
                this.showStatus(`✅ 文件夹放入：${result.path}`, 'success');

            } catch (error) {
                this.showStatus(`❌ 传输失败: ${error.message}`, 'error');
            } finally {
                btn.disabled = false;
                btn.innerHTML = '📂 下载';
            }
        }
        
        async extractZip(blob, filename) {
            try {
                this.showStatus('正在解压文件...', 'info');
                
                // 使用 JSZip 库解压
                const JSZip = await this.loadJSZip();
                const zip = await JSZip.loadAsync(blob);
                
                const extractPath = document.getElementById('extractPath').value;
                
                // 创建解压路径
                const extractDir = `${extractPath}\\${filename.replace('.zip', '')}`;
                
                // 创建目录
                await this.createDirectory(extractDir);
                
                // 解压所有文件
                const files = Object.keys(zip.files);
                for (const filename of files) {
                    const zipEntry = zip.files[filename];
                    if (!zipEntry.dir) {
                        const content = await zipEntry.async('uint8array');
                        await this.writeFile(`${extractDir}\\${filename}`, content);
                    }
                }
                
                this.showStatus(`文件已解压到: ${extractDir}`, 'success');
            } catch (error) {
                throw new Error(`解压失败: ${error.message}`);
            }
        }
        
        async loadJSZip() {
            if (window.JSZip) return window.JSZip;
            
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';
                script.onload = () => resolve(window.JSZip);
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }
        
        async createDirectory(path) {
            // 这里需要实现创建目录的逻辑
            // 由于浏览器安全限制，我们需要使用 File System Access API
            try {
                const dirHandle = await window.showDirectoryPicker();
                return dirHandle;
            } catch (error) {
                throw new Error('无法创建目录，请手动选择解压位置');
            }
        }
        
        async writeFile(path, content) {
            // 由于浏览器安全限制，我们提供下载后手动解压的替代方案
            const blob = new Blob([content]);
            this.downloadBlob(blob, path.split('\\').pop());
        }
        
        downloadBlob(blob, filename) {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
        }
        
        uploadFiles() {
            document.getElementById('fileInput').click();
        }
        
        async handleFileUpload(event) {
            const files = event.target.files;
            if (files.length === 0) return;
            
            const formData = new FormData();
            for (let file of files) {
                formData.append('file', file);
            }
            
            try {
                const response = await fetch(`${this.serverUrl}/api/upload`, {
                    method: 'POST',
                    body: formData
                });
                
                if (!response.ok) throw new Error('上传失败');
                
                const result = await response.json();
                // this.showStatus(`上传成功: ${result.message}`, 'success');
                setTimeout(() => {
                    btn.innerHTML = '⬆️ 成功';
                }, 5000);
            } catch (error) {
                this.showStatus(`上传错误: ${error.message}`, 'error');
            }
            
            // 清空文件输入
            event.target.value = '';
        }
        
        formatSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
    }
    
    // 初始化系统
    document.addEventListener('DOMContentLoaded', () => {
        new FolderTransferSystem();
    });
</script>


</body>
</html>



























